import React from 'react'
import WeUI from 'react-weui'
import IconHome from '../assets/images/home.jpg'
import IconUser from '../assets/images/user.jpg'
import { useNavigate } from 'react-router-dom'
import BDBookItem from '../components/BDBookItem'

const {
    Tab: WTab,// 标签页，别名
    TabBody,
    TabBar,
    TabBarItem,
    Panel,// n.	面板
    PanelBody,
    SearchBar
} = WeUI

const Tab = () => {
    const navigate = useNavigate();
    let items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6];
    const gotoUser = () => {
        navigate('/user')
    }
    return (
        <WTab >
            <TabBody>
                <Panel>
                    <PanelBody>
                        <SearchBar placeholder="请输入您要查找的图书" lang={{ cancel: "取消" }} />
                        {
                            items.map((item, i) => {
                                return (
                                    <BDBookItem key={i} />
                                )
                            })
                        }
                    </PanelBody>
                </Panel>
            </TabBody>
            <TabBar>
                <TabBarItem active={true} icon={<img src={IconHome} />} label="书单" />
                <TabBarItem
                    onClick={gotoUser}
                    active={false} icon={<img src={IconUser} />} label="我" />
            </TabBar>
        </WTab>
    )
}

export default Tab